<template>
	<view class="u-demo">
		<view class="u-demo-wrap" style="background-color: #FFFFFF;">

			<u-toast ref="uToast" />

			<u-popup v-model="show" mode="center" border-radius="14">

				<u-upload :action="action" :file-list="fileList" :max-size="1 * 1024 * 1024" max-count="1"
					:deletable="false" ref="uUpload" @on-success="qrUpload">
				</u-upload>
				<view class="u-flex u-row-center">
					<u-button size="mini" :custom-style="{marginTop: '20rpx'}" @click="clear">删除</u-button>
				</view>
			</u-popup>


			<u-popup v-model="styleShow" mode="center" border-radius="14" width="400rpx" height="400rpx">

				<u-radio-group v-model="templateType" @change="radioGroupChange">
					<u-radio @change="radioChange" v-for="(item, index) in list" :key="index" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>


				</u-radio-group>
				<u-image width="400" height="300" :src="templatePic"></u-image>
			</u-popup>


			<view class="u-demo-title">
				<view>
					请输入内容，点击按钮生成二维码
					<u-button @click="show = true" size="mini" style="margin-left: 20rpx;">自定义二维码</u-button>
				</view>
			</view>
			<view class="u-demo-area u-flex u-row-center">
				<u-image width="400" height="300" src="/static/common/img/view.png"></u-image>
			</view>
			<view class="u-demo-area">
				<u-field v-model="to" label="To" placeholder="请输入内容" :icon="icon1" :type="type">
					<u-button slot="right" @click="styleShow = true" size="mini" style="margin-left: 20rpx;">选择模板
					</u-button>

				</u-field>
				<u-field v-model="content" label="表白内容" placeholder="请输入内容" :icon="icon2" type="textarea">
					<u-button v-if="true" slot="right" size="mini" type="success" @click="createQr()">生成二维码</u-button>
				</u-field>
			</view>
			<view class="u-demo-area u-flexm u-row-center">

				<u-image width="200" height="200" :src="qrSrc"></u-image>
				<u-button size="mini" type="success" @click="saveQr()" style="margin-top: 20rpx;">
					保存二维码</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				to: '',
				content: '',
				qrSrc: null,
				qrImg: null,
				show: false,
				styleShow: false,
				// 演示地址，请勿直接使用
				action: 'https://1847961572749689.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/love520.LATEST/love520/confess/upload',
				//action: 'http://localhost:8089/2016-08-15/proxy/love520.LATEST/love520/confess/upload',
				fileList: [

				],
				list: [{
						name: '模板1',
						disabled: false
					},
					{
						name: '模板2',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				templateType: '模板1',
				templatePic: '/static/common/img/template1.jpg'
			};
		},
		methods: {
			qrUpload(data, index, lists, name) {
				if(data === 'error'){
					this.$refs.uToast.show({
										title: '生成失败，请检查您的输入是否包含违规信息',
										type: 'error'
									})
					return
				}
			
				this.qrImg = data
			},
			createQr() {
				uni.showLoading({
					title: "生成中"
				})
				uni.request({
					method: 'POST',
					data: {
						"to": this.to,
						"content": this.content,
						"logo": this.qrImg,
						"template": this.templateType.replace('模板', '')
					},
					url: 'https://1847961572749689.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/love520.LATEST/love520/confess/save',
					//url: 'http://localhost:8089/2016-08-15/proxy/love520.LATEST/love520/confess/save',
					success: (res) => {
						if(res.data === 'error'){
							uni.hideLoading()
							this.$refs.uToast.show({
												title: '生成失败，请检查您的输入是否包含违规信息',
												type: 'error'
											})
							return
						}
						
						this.qrSrc = 'https://itheima-test-love520-2.oss-cn-beijing.aliyuncs.com/' + res.data +
							"qr.jpg"
						// 提示用户下载成功
						uni.showToast({
							title: "生成成功",
							icon: "none"
						})
					}
				})

			},
			async saveQr() {
				uni.showLoading({
					title: "下载中"
				})
				// 将远程文件下载到小程序的内存里面
				const result1 = await uni.downloadFile({
					url: this.qrSrc
				})
				const {
					tempFilePath
				} = result1[1]
				// 将小程序的临时文件下载到本地上
				const result2 = await uni.saveImageToPhotosAlbum({
					filePath: tempFilePath
				})
				// 提示用户下载成功
				uni.showToast({
					title: "下载成功",
					icon: "none"
				})
			},
			clear() {
				this.$refs.uUpload.clear();
			},
			radioChange(e) {
				if (e === '模板1') {
					this.templatePic = '/static/common/img/template1.jpg'
				} else if (e === '模板2') {
					this.templatePic = '/static/common/img/template2.jpg'
				}
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			}

		}
	};
</script>

<style lang="scss" scoped>
	.u-demo {}

	.content {
		margin-top: 20px;
		white-space: pre-wrap;
		line-height: 30px;
	}

	.u-flexm {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
</style>
